<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="author" content="Cheresting" />
  <!-- 自动添加dayjs到全局 -->
  <script src="./publicJs/dayjs.min.js"></script>
  <!-- 自动添加vue到全局 -->
  <script src="./publicJs/vue.global.prod.js"></script>
  <!-- 自动添加axios到全局 -->
  <script src="./publicJs/axios.min.js"></script>
  <!-- 自动添加Cookies到全局 -->
  <script src="./publicJs/js.cookie.min.js"></script>
  <!-- 自动添加XLSX到全局 -->
  <script src="./publicJs/xlsx.core.min.js"></script>

  <link rel="stylesheet" href="./publicJs/element-plus.index.css" />
  <!-- 自动添加ElementPlus到全局 -->
  <script src="./publicJs/element-plus.index.full.js"></script>
  <script src="./publicJs/index.iife.min.js"></script>
  <!-- 添加组件到全局 -->
  <script src="./components/production-order-info.js"></script>
  <script src="./components/production-process-info.js"></script>
  <script src="./components/production-bom-info.js"></script>

  <title>dyx测试</title>
</head>

<body>
  <div id="app">
    <el-backtop :bottom="100">
      <div
        style="
          height: 100%;
          width: 100%;
          background-color: var(--el-bg-color-overlay);
          box-shadow: var(--el-box-shadow-lighter);
          text-align: center;
          line-height: 40px;
          color: #1989fa;
        "
      >
        UP
      </div>
    </el-backtop>
    <el-container style="height: 100%;">
      <el-aside width="200px">
        <div style="padding: 20px;">
          <h3>侧边栏</h3>
          <div>
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </div>
          <div>
            <p>这里是侧边栏内容</p>
            <el-slider v-model="valueSlider" :step="10" show-stops :show-tooltip="false"/>
          </div>
          <div style="margin-top: 20px; text-align: center;">
            <el-statistic 
                title="工作天数" 
                :value="1992"
                class="theme-statistic"
                style="width: 120px;"
            />
          </div>
          <div>
            <br/>
          </div>
          <div class="statistic-card" >
            <el-statistic :value="98500" style="width: 120px;">
              <template #title>
                <div style="display: inline-flex; align-items: center">
                  每日业绩￥
                  <el-tooltip
                    effect="dark"
                    content="昨日收入"
                    placement="top"
                  >
                    <el-icon style="margin-left: 4px" :size="12">
                      <Warning />
                    </el-icon>
                  </el-tooltip>
                </div>
              </template>
            </el-statistic>
            <div class="statistic-footer">
              <div>
                <span>较前日上涨</span>
                <span class="green">
                    24%
                  <el-icon>
                    <CaretTop />
                  </el-icon>
                </span>
              </div>
            </div>
          </div>
          <div>
            <el-badge is-dot class="itm1">
              <el-button class="share-button" :icon="Share" type="primary" />
            </el-badge>
            
            <el-badge value="99" class="itm1">
              <el-button type="primary">share</el-button>
              <template #content="{ value }">
                <div class="custom-content">
                  <span>{{ value }}</span>
                </div>
              </template>
            </el-badge>
          </div>         

        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div style="width: 100%;">
            <el-menu
              
              :default-active="activeIndex2"
              class="el-menu-demo"
              mode="horizontal"
              background-color="var(--menu-bg-color)"
              text-color="var(--menu-text-color)"
              active-text-color="var(--menu-text-color)"
              @select="handleSelect"
              
            >
              <div class="header-content">
                <h2 @click="returnWel" style="cursor: pointer;">&nbsp;&nbsp;主标题&nbsp;&nbsp;</h2>
              </div>
              <el-menu-item index="1">表格</el-menu-item>
              <el-sub-menu index="2">
                <template #title>图片展示</template>
                <el-menu-item index="2-1">图片懒加载</el-menu-item>
                <el-sub-menu index="2-2">
                  <template #title>走马灯</template>
                  <el-menu-item index="2-2-1">常规</el-menu-item>
                  <el-menu-item index="2-2-2">横向卡片</el-menu-item>
                  <el-menu-item index="2-2-3">纵向卡片</el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
              <el-menu-item index="3">选择器</el-menu-item>
              <div class="button-row">

                <el-button type="primary" :icon="Download" circle />

              </div>
              
              <div class="switch-container">
                <el-switch
                  v-model="isDarkMode"
                  class="custom-switch-text-color"
                  style="--el-switch-on-color: #8a8784; --el-switch-off-color: #8a8784;margin-left: 0%;"
                  :active-action-icon="Moon"
                  :inactive-action-icon="Sunny"
                  active-text="夜间"
                  inactive-text="白天"
                  @change="toggleDarkMode"
                />
              </div>
              
              
            </el-menu>
          </div>


          
        </el-header>
        <el-main>
          
          <!-- 数据表table展示测试 -->
          <el-table-v2
            :columns="columns"
            :data="tableData"
            :width="600"
            :height="tableHeight"
            fixed
            v-if="tableVersion"
          >
          <template #empty>
            <div class="flex items-center justify-center h-100%;">
              <el-empty />
            </div>
          </template>
        </el-table-v2>
          <!-- 走马灯常规展示测试 -->
          <el-carousel height="400px" motion-blur :autoplay="false" v-if="carouselVersion1">
            <el-carousel-item  v-for="url in ImgUrls" :key="url">
              <el-image :src="url" fit="contain" ></el-image>
            </el-carousel-item>
          </el-carousel>
          <!-- 横向卡片 -->
          <el-carousel height="400px" :interval="4000" type="card" v-if="carouselVersion2">
            <el-carousel-item v-for="url in ImgUrls" :key="url">
              <el-image :src="url" fit="contain" ></el-image>
            </el-carousel-item>
          </el-carousel>
          <!-- 纵向卡片 -->
          <el-carousel
            height="400px"
            direction="vertical"
            type="card"
            :autoplay="false"
             v-if="carouselVersion3"
          >
            <el-carousel-item v-for="url in ImgUrls" :key="url">
              <el-image :src="url" fit="cover" ></el-image>
            </el-carousel-item>
          </el-carousel>
          <!-- 图片懒加载 -->
          <div>
            <el-image 
              style="display: block;min-height: 200px;margin-bottom: 10px;"
              v-for="url in ImgUrls" :key="url" :src="url" lazy v-if="lazyPicVersion"/>
          </div>
           <!-- 结果展示（主界面） -->
          <div class="skeleton" v-if="welVersion">
            <el-skeleton animated style="--el-skeleton-circle-size: 100px;">
              <template #template>
                <el-skeleton-item variant="circle" />
              </template>
            </el-skeleton>
            <br />
            <el-skeleton animated />
          </div>
          <!-- 选择器 -->
          <el-select-v2
            v-if="selVersion"
            filterable
            multiple
            v-model="valueSe"
            :options="options"
            placeholder="选择器"
            style="width: 240px"
          />



        </el-main>

        <el-footer style="height: 45px;">
          <p>
            页脚信息 &copy; 2025年dyx测试各功能实现
          </p>
          
        </el-footer>
      </el-container>
    </el-container>
  </div>
</body>
<script type="module">
  import useMyXlsx from './hooks/useMyXlsx.js'
  let myXlsx = useMyXlsx()
  import { showSuccess, showWarning } from './hooks/useMyMessageBox.js'
  import myAxios from './myAxios/myAxios.js'
  const { Download,Share,UploadFilled, Search,Moon, Sunny,Calendar,Warning,CaretTop  } = ElementPlusIconsVue
  const { ElImage, ElLoading,ElTag,ElButton, } = ElementPlus

  const { createApp, ref, reactive, computed, h ,onMounted} = Vue
  
 
  const app = createApp({
    name: 'dyxceshi',
    setup() {
      
      const isDarkMode = ref(false);
      const inputText = ref('');
      const tableData = ref([
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        {date: '2025-07-01',name: '张三',address: '浙江省宁波市鄞州区新明街道'},
        {date: '2025-08-02',name: '李四',address: '浙江省宁波市北仑区小港街道'},
        {date: '2025-06-03',name: '王五',address: '浙江省宁波市江北区某某街道'},
        
      ]);
      const ImgUrls = [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
      ]
      const columns=ref([
        {Key: 'date',dataKey: 'date',title: '日期',width: 180,align: 'center',fixed: 'left',},
        {Key: 'name',dataKey: 'name',title: '姓名',width: 180,align: 'center',},
        {Key: 'address',dataKey: 'address',title: '地址',width: 180,align: 'center',},

      ])
      const activeIndex = ref('1');
      const tableVersion=ref(false);
      const lazyPicVersion=ref(false);
      const carouselVersion1=ref(false);
      const carouselVersion2=ref(false);
      const carouselVersion3=ref(false);
      const welVersion=ref(true);
      const selVersion=ref(false);

      const valueSlider=ref(0)
      const handleSelect = (key, keyPath) => {
        activeIndex.value = key;
        if(key!='4')
          changeVersion();
          
      };
      
      const changeVersion=()=>{
        welVersion.value=false;
        tableVersion.value=false;
        carouselVersion1.value=false;
        carouselVersion2.value=false;
        carouselVersion3.value=false;
        lazyPicVersion.value=false;
        selVersion.value=false;
        if(activeIndex.value==='1')
          tableVersion.value=true;
        else if(activeIndex.value==='2-2-1')
          carouselVersion1.value=true;
        else if(activeIndex.value==='2-2-2')
          carouselVersion2.value=true;
        else if(activeIndex.value==='2-2-3')
          carouselVersion3.value=true;
        else if(activeIndex.value==='2-1')
          lazyPicVersion.value=true;
        else if(activeIndex.value==='3')
          selVersion.value=true;
        else
          welVersion.value=true;
        

      }
      const returnWel=()=>{
        activeIndex.value=0;
        changeVersion();
      }
      // 切换主题模式
      const toggleDarkMode = (val) => {
        isDarkMode.value = val;
        if (val) {
          document.body.classList.add('dark-mode');
          // 保存用户偏好到 localStorage
          localStorage.setItem('theme-preference', 'dark');
        } else {
          document.body.classList.remove('dark-mode');
          localStorage.setItem('theme-preference', 'light');
        }
      };
      
      const HEADER_HEIGHT = 50; // 表头高度估计
      const ROW_HEIGHT_ESTIMATE = 50; // 每行高度估计 (包括 padding/border)
      const MAX_HEIGHT = window.innerHeight - 150; // 最大高度

      // 计算表格高度
      const tableHeight = computed(() => {
        // 计算内容所需高度：表头 + 行数 * 每行高度
        const contentHeight = HEADER_HEIGHT + (tableData.value.length * ROW_HEIGHT_ESTIMATE);
        // 返回计算高度和最大高度中的较小值
        return Math.min(contentHeight, MAX_HEIGHT);
      });
      // 组件挂载时恢复用户偏好
      onMounted(() => {
        const savedTheme = localStorage.getItem('theme-preference');
        if (savedTheme === 'dark') {
          isDarkMode.value = true;
          document.body.classList.add('dark-mode');
        } else if (savedTheme === 'light') {
          isDarkMode.value = false;
          document.body.classList.remove('dark-mode');
        }


      });
      
      const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

      const valueSe = ref([])
      const options = Array.from({ length: 1000 }).map((_, idx) => ({
        value: `Option ${idx + 1}`,
        label: `${initials[idx % 10]}${idx}`,
      }))
      return {
        isDarkMode,
        inputText,
        tableData,
        toggleDarkMode,
        Moon,Sunny,Download,Share,
        columns,
        tableHeight,
        activeIndex,
        handleSelect,
        tableVersion,
        carouselVersion1,carouselVersion2,carouselVersion3,
        lazyPicVersion,welVersion,selVersion,
        valueSlider,
        ImgUrls,
        returnWel,
        options,


      };
    },
  });
  
  // 使用Element Plus
  app.use(ElementPlus)
  app.mount('#app')
</script>
<style>
    /* 基础样式 - 确保布局占满页面 */
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    #app {
      height: 100%;
    }
    .el-container {
      height: 100%;
    }
    .el-carousel__item .el-image {
        width: 100% !important; 
        height: 100% !important; 
        /* 确保内部的 img 元素也填满 */
    }
    :global(h2#card-usage ~ .example .example-showcase) {
      background-color: var(--el-fill-color) !important;
      }
        .el-statistic {
        --el-statistic-content-font-size: 28px;
      }

      .statistic-card {
        height: 100%;
        padding: 20px;
        border-radius: 4px;
        background-color: var(--el-bg-color-overlay);
      }

      .statistic-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        font-size: 12px;
        color: var(--el-text-color-regular);
        margin-top: 16px;
      }

      .statistic-footer .footer-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
      }

      .statistic-footer .footer-item span:last-child {
        display: inline-flex;
        align-items: center;
        margin-left: 4px;
      }

      .green {
        color: green;
      }
      .red {
        color: var(--el-color-error);
      }
    .theme-statistic .el-statistic__head,
    .theme-statistic .el-statistic__content,
    .theme-statistic .el-statistic__content__value {
        color: var(--menu-text-color) !important;
    }
    .theme-statistic {
        background-color: var(--menu-bg-color);
        padding: 15px;
        border-radius: 8px;
        display: inline-block;
    }
    .statistic-card .el-statistic__head,
    .statistic-card .el-statistic__content,
    .statistic-card .el-statistic__content__value {
        color: var(--menu-text-color) !important;
        
    }
    .statistic-card{
      background-color: var(--menu-bg-color);
    }
    .statistic-footer {
        background-color: var(--menu-bg-color);
        color: var(--menu-text-color) !important;
        padding: 15px;
        border-radius: 8px;
        display: inline-block;
    }
    /* 白天模式 (默认) */
    :root {
      --menu-bg-color: #b3c0d1;
      --menu-text-color: #050505;
      --menu-active-text-color: #ffd04b;
      --bg-color-page: #f5f5f5;
      --bg-color-aside: #d3dce6;
      --color-aside-text: #333;
      --bg-color-header: #b3c0d1;
      --color-header-text: #333;
      --bg-color-main: #e9eef3;
      --color-main-text: #333;
      --bg-color-footer: #b3c0d1;
      --color-footer-text: #333;
      --bg-color-card: #ffffff;
      --color-text-primary: #000000;
      --color-text-secondary: #606266;
      --el-bg-color-overlay: #fff;
    }
    /* 夜间模式 */
    .dark-mode {
      --menu-bg-color: #3a3a3a; /* 更深的背景 */
      --menu-text-color: #e0e0e0; /* 更亮的文字 */
      --menu-active-text-color: #ffd700; /* 稍微不同的高亮色 */
      --bg-color-page: #1a1a1a;
      --bg-color-aside: #2d2d2d;
      --color-aside-text: #e0e0e0;
      --bg-color-header: #3a3a3a;
      --color-header-text: #e0e0e0;
      --bg-color-main: #252525;
      --color-main-text: #e0e0e0;
      --bg-color-footer: #3a3a3a;
      --color-footer-text: #e0e0e0;
      --bg-color-card: #333333;
      --color-text-primary: #ffffff;
      --color-text-secondary: #b0b0b0;
      --el-bg-color-overlay: #3a3a3a;
    }

    /* 应用主题变量 */
    body {
      background-color: var(--bg-color-page);
      color: var(--color-text-primary);
      transition: background-color 0.3s, color 0.3s; /* 平滑过渡 */
    }
    .el-menu {
      background-color: var(--menu-bg-color) !important;
      border: none !important; /* 移除默认边框 */
      align-items: center;
    }

    .el-menu--horizontal {
        border-bottom: none !important;
    }
    .el-menu-item, .el-sub-menu__title {
      color: var(--menu-text-color) !important;
    }
    .el-menu-item:hover, .el-sub-menu__title:hover {
       background-color: color-mix(in srgb, var(--menu-bg-color), #ffffff 10%) !important; /* 悬停时稍微亮一点 */
    }
    .el-menu-item.is-active {
      
      color: var(--menu-active-text-color) !important;
      background-color: var(--menu-bg-color) !important;
    }
    /* 子菜单背景 */
    .el-menu--horizontal .el-sub-menu .el-menu {
        background-color: var(--menu-bg-color) !important;
        border: none !important;
        border-radius: 0 0 4px 4px; /* 子菜单圆角 */
    }
    .el-menu--popup {
        background-color: var(--menu-bg-color) !important;
        border: 1px solid color-mix(in srgb, var(--menu-bg-color), #ffffff 20%) !important;
    }
    
    .el-aside {
      background-color: var(--bg-color-aside);
      color: var(--color-aside-text);
      transition: background-color 0.3s, color 0.3s;
    }

    .el-header {
      background-color: var(--bg-color-header);
      color: var(--color-header-text);
      transition: background-color 0.3s, color 0.3s;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0%;
    }


    .el-main {
      background-color: var(--bg-color-main);
      color: var(--color-main-text);
      transition: background-color 0.3s, color 0.3s;
    }

    .el-footer {
      background-color: var(--bg-color-footer);
      color: var(--color-footer-text);
      transition: background-color 0.3s, color 0.3s;
    }

    /* Element Plus 组件样式覆盖 */
    .dark-mode .el-card {
      background-color: var(--bg-color-card);
      border-color: #4c4c4c;
    }
    .dark-mode .el-card__header {
      background-color: #424242;
      border-color: #4c4c4c;
      color: var(--color-text-primary);
    }
    .dark-mode .el-input__wrapper {
        background-color: #424242;
        box-shadow: 0 0 0 1px #4c4c4c inset;
    }
    .dark-mode .el-input__inner {
        background-color: transparent;
        color: var(--color-text-primary);
    }
    .dark-mode .el-button {
        background-color: #424242;
        border-color: #4c4c4c;
        color: var(--color-text-primary);
    }
    .dark-mode .el-button:hover {
        background-color: #4c4c4c;
        border-color: #5a5a5a;
        color: #ffffff;
    }
   
    .dark-mode .el-table-v2 {
      background-color: #2d2d2d; /* 表格容器背景 */
      color: var(--color-text-primary);
      border: 1px solid #4c4c4c; /* 添加边框 */
    }

    /* 2. 表头区域 */
    .dark-mode .el-table-v2__header-wrapper {
      background-color: #3a3a3a; /* 表头背景 */
      border-bottom: 1px solid #4c4c4c;
    }

    /* 3. 表头单元格 */
    .dark-mode .el-table-v2__header-row .el-table-v2__header-cell {
      background-color: #3a3a3a; /* 单元格背景 */
      color: var(--color-text-primary); /* 文字颜色 */
      border-right: 1px solid #4c4c4c; /* 列分隔线 */
    }
    .dark-mode .el-table-v2__header-row .el-table-v2__header-cell:last-child {
        border-right: none; /* 最后一列去掉右边框 */
    }

    /* 4. 表体区域 */
    .dark-mode .el-table-v2__body-wrapper {
      background-color: #2d2d2d; /* 表体背景 */
    }

    /* 5. 表体行 */
    .dark-mode .el-table-v2__row {
      background-color: #2d2d2d; /* 行背景 */
      color: var(--color-text-primary); /* 行文字颜色 */
    }

    /* 6. 表体单元格 */
    .dark-mode .el-table-v2__cell {
      background-color: transparent; /* 单元格背景透明，继承行背景 */
      color: inherit; /* 继承行文字颜色 */
      border-right: 1px solid #4c4c4c; /* 列分隔线 */
      border-bottom: 1px solid #3a3a3a; /* 行分隔线 */
    }
    .dark-mode .el-table-v2__cell:last-child {
        border-right: none; /* 最后一列去掉右边框 */
    }

    /* 7. 鼠标悬停效果 */
    .dark-mode .el-table-v2__row:hover {
      background-color: #424242 !important; /* 悬停行背景 */
    }

    /* 8. 奇偶行条纹 (如果需要) */
    .dark-mode .el-table-v2__row--striped {
       background-color: #333333; /* 条纹行背景 */
    }
    .dark-mode .el-table-v2__row--striped:hover {
       background-color: #424242 !important; /* 条纹行悬停背景 */
    }

    /* 9. 滚动条 (美化) */
    .dark-mode .el-table-v2::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .dark-mode .el-table-v2::-webkit-scrollbar-track {
        background: #2d2d2d;
    }
    .dark-mode .el-table-v2::-webkit-scrollbar-thumb {
        background-color: #555;
        border-radius: 4px;
    }
    .dark-mode .el-table-v2::-webkit-scrollbar-thumb:hover {
        background-color: #777;
    }

    .custom-switch-text-color.is-checked .el-switch__label--left span {
        color: white !important; /* 左侧文本（夜间）设为白色 */
    }
    .custom-switch-text-color.is-checked .el-switch__label--right span {
        color: white !important; /* 右侧文本（夜间）设为白色 */
    }

    /* 当开关处于“关”(isDarkMode=false, 白天) 状态时 */
    .custom-switch-text-color:not(.is-checked) .el-switch__label--left span {
        color: black !important; /* 左侧文本（白天）设为黑色 */
    }
    .custom-switch-text-color:not(.is-checked) .el-switch__label--right span {
        color: black !important; /* 右侧文本（白天）设为黑色 */
    }
    .custom-switch-text-color .el-switch__action svg {
        color: black !important; /* 设置图标颜色为黑色 */
    }
    /* 微调图标颜色以匹配文本 */
    .custom-switch-text-color .el-switch__action {
        color: inherit !important; /* 图标颜色继承父元素（文本）颜色 */
    }
    .switch-container {
      display: flex;
      align-items: center;
      margin-right: 20px; 
    }

    .itm1 {
      margin-top: 30px;
      margin-right: 20px;
    }
    .button-row > * {
      margin: 20px;
    }

</style>

</html>